<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus'
import axios from 'axios';
import type { IComment } from "@/interface/IComment.ts";

const info = ref<object>();
const props = defineProps( {
  id : {
    type : String,
    required : true
  },
  title : {
    type : String,
    required : true
  }
} );

const goodImg = '/common/good.png';
const badImg = '/common/bad.png';
const commentForm = reactive( {
  comment : '',
  article_id : props.id,
} );
const commentList = ref<IComment[]>( [] );
const fetchCommentList = async( id : string ) => {
  try {
    let response = await axios.get( '/api/website/commentList/' + id );
    commentList.value = response.data.data;
  } catch( error ) {
    console.error( '获取评论列表失败:', error );
  }
}

const submitComment = async() => {
  try {
    let response = await axios.post( '/api/website/submitComment', commentForm );
    console.log( response.data );
    if( response.data.code === 200 ) {
      ElMessage.success( response.data.msg );
    } else {
      ElMessage.error( response.data.msg );
    }
  } catch( error ) {
    console.error( '发表评论失败:', error );
  }
}

/**
 * 获取文章信息
 * @param id 文章ID
 */
const fetchArticleInfo = async( id : string ) => {
  try {
    let response = await axios.get( `/api/website/article/${ id }` );
    info.value = response.data.data;
  } catch( error ) {
    console.error( '获取文章信息失败:', error );
  }
}
onMounted( () => {
  fetchArticleInfo( <string> props.id );
  fetchCommentList( <string> props.id );
} );
</script>

<template>
  <div>
    <h1>{{ info?.title }}</h1>
    <div v-html="info?.content"></div>
    <div class="margin-top-10">
      <el-card>
        <template #header>
          <div>评论</div>
          <div class="padding-bottom-10 padding-top-10">
            <el-input type="textarea" placeholder="请输入内容" v-model="commentForm.comment" clearable></el-input>
          </div>
          <div>
            <el-button type="primary" @click="submitComment">发表评论</el-button>
          </div>
        </template>
        <template #default>
          <template v-for="item in commentList" :key="item.id">
            <el-row :gutter="10">
              <el-col :span="1">
                <el-avatar :size="30" :src="item.avatar"></el-avatar>
              </el-col>
              <el-col :span="23">
                <div>
                  <el-space :direction="'horizontal'" :size="'small'">
                    <span class="font-size-16">{{ item.nickname }}</span>
                    <span class="font-size-12">{{ item.create_time }}</span>
                  </el-space>
                </div>
                <div class="padding-bottom-10 padding-top-10">{{ item.content }}</div>
                <div class="padding-bottom-20">
                  <el-space :direction="'horizontal'" :size="'small'">
                    <el-image :src="goodImg" style="width: 16px;height: 16px;"></el-image>
                    <span class="font-size-12">赞 {{item.like_count}}</span>
                    <el-image :src="badImg" style="width: 16px;height: 16px;"></el-image>
                    <span class="font-size-12">踩 {{item.dislike_count}}</span>
                  </el-space>
                </div>
              </el-col>
            </el-row>
          </template>
        </template>
      </el-card>
    </div>
  </div>
</template>

<style scoped>

</style>